<template>
  <div class="views_BOX from_masrgin_box fontPRPS ">
    <vue-scroll
      ref="orderListVs"
      :ops="$store.state.ops"
    >
      <div class="BOX_main">
        <!-- 订单信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">
            <span>订单信息</span>
            <span
              class="color_bsae"
              @click="goBack"
            >返回</span>
          </div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorBlack table_item_backgroundGray FSBC">
              <div class="table_li_first">商品名称</div>
              <div class="table_li_order">价格</div>
              <div class="table_li_order">数量</div>
              <div class="table_li_order">实际支付额</div>
            </li>
            <li
              class="table_item FSBC"
              v-for="(item, index) in DetailList"
              :key="index"
            >
              <!-- <el-tooltip :disabled="item.name.lenth < 30" effect="light" :content="item.name" placement="bottom"> -->
              <div class="table_li_first table_li_taLeft">{{item.title}}</div>
              <!-- </el-tooltip> -->
              <div class="table_li_order">{{item.price}}</div>
              <div class="table_li_order">{{item.num}}</div>
              <div class="table_li_order">{{item.totalFee}}</div>
            </li>
            <li class="table_item FSBC">
              <div class="table_li_fontBlod">订单总价：<span class="color_bsae">￥{{DetailMessage.payment}}</span></div>
            </li>
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">支付方式：{{DetailMessage.paymentType | payTypeFil}} ({{DetailMessage.paymentType | payTypeFil}}{{DetailMessage.receiverMobile}})</div>
              <div class="table_li_lh30 table_li_taLeft">下单时间：{{DetailMessage.createTime}}</div>
              <div class="table_li_lh30 table_li_taLeft">付款时间:<span class="table_li_taLeft_span"></span> {{DetailMessage.paymentTime==null? "未付款" :DetailMessage.paymentTime}}</div>
              <div class="table_li_lh30 table_li_taLeft">完成时间：{{DetailMessage.endTime==null? "未完成支付" :DetailMessage.paymentTime}}</div>
            </li>
          </ul>
          <div class="BOX_main_line" />
        </div>
        <!-- 物流信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">物流信息</div>
          <ul
            class="BOX_main_item_table"
            v-show="DetailMessage.shippingCode!=null"
          >
            <li class="table_item table_item_colorBlack FSBC">
              <div class="table_li_fontBlod">物流单号：{{DetailMessage.shippingCode}}</div>
            </li>
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">收货人：{{DetailMessage.shippingName}}</div>
              <div class="table_li_lh30 table_li_taLeft">手机号：{{DetailMessage.shipperMobile}}</div>
              <div class="table_li_lh30 table_li_taLeft">收货地址：{{DetailMessage.shipperCity}} {{DetailMessage.shipperArea}}{{DetailMessage.receiverAreaName}}</div>
            </li>
          </ul>
          <div v-show="DetailMessage.shippingCode==null">
            没有物流信息
          </div>
          <div class="BOX_main_line" />
        </div>
        <!-- 发票信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">发票信息</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorBlack FSC">
              <div>名称：个人</div>
              <div class="mgl_100">纳税人识别号：76584930857658493</div>
            </li>
            <li class="table_item table_item_backgroundGray FSBC">
              <div class="table_li_first">商品名称</div>
              <div class="table_li_invoice">规格型号</div>
              <div class="table_li_invoice">单位</div>
              <div class="table_li_invoice">数量</div>
              <div class="table_li_invoice">单价</div>
              <div class="table_li_invoice">金额</div>
              <div class="table_li_invoice">税率</div>
              <div class="table_li_invoice">税额</div>
            </li>
            <li
              class="table_item FSBC"
              v-for="(item, index) in DetailList"
              :key="index"
            >
              <div class="table_li_first table_li_taLeft">{{item.title}}</div>
              <div class="table_li_invoice">{{item.spec==null?"无":item.spec}}</div>
              <div class="table_li_invoice">件</div>
              <div class="table_li_invoice">{{item.num}}</div>
              <div class="table_li_invoice">{{item.price}}</div>
              <div class="table_li_invoice">{{item.totalFee}}</div>
              <div class="table_li_invoice">暂无</div>
              <div class="table_li_invoice">暂无</div>
            </li>
            <li class="table_item FSBC">
              <div class="table_li_first table_li_taLeft">合计</div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice">{{DetailMessage.payment}}</div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice">{{DetailMessage.payment}}</div>
            </li>
            <li class="table_item FSC">
              <div>传统合计（大写）</div>
              <div class="mgl_40">{{DetailMessage.payment| toChies}}</div>
              <div class="mgl_100">（小写）</div>
              <div class="mgl_40">￥{{DetailMessage.payment}}</div>
            </li>
          </ul>
          <div class="BOX_main_line" />
        </div>
        <!-- 操作历史 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">操作历史</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorGray table_item_padding FDJCC">
              <div
                class="table_li_lh30 table_li_taLeft FSC"
                v-for="(item,index) in orderDetail.history"
                :key="index"
              >
                <div class="w_120">
                  {{item.type | historyFil}}
                  {{item.type==1?orderDetail.order.user:orderDetail.shopName}}
                </div>
                <span class="mgl_10">
                  {{item.time | dateYMDFil}}
                  {{item.time | dateHFSFil}}
                </span>
                <span class="mgl_10">{{item.activity}}</span>
              </div>
            </li>
          </ul>
          <div class="BOX_main_line" />
        </div>
        <!-- 维权历史 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">维权历史</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">
                发生时间：
                {{DetailMessage.payment}}
                {{DetailMessage.payment}}
              </div>
              <div class="table_li_lh30 table_li_taLeft">退款编号：{{DetailMessage.payment}}</div>
              <div class="table_li_lh30 table_li_taLeft">退款金额：<span class="color_bsae">￥{{DetailMessage.payment}}</span></div>
            </li>
          </ul>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import { orderDetails } from "../../../../requestApi/order/allOrder";
export default {
  components: {},
  data() {
    return {
      orderId: "1135382850065924096",
      DetailMessage: {},
      DetailList: [],
      orderDetail: {
        shopName: "伯图旗舰店",
        history: [
          { type: 1, time: "1589425624000", activity: "提交订单 " },
          { type: 1, time: "1589425724000", activity: "支付订单 " },
          { type: 2, time: "1589425824000", activity: "发送货物 " },
          { type: 1, time: "1589425924000", activity: "收取货物 " },
          { type: 1, time: "1589426024000", activity: "确认订单 " }
        ],
        order: {
          user: "嘻嘻嘻",
          orderId: "ORDER178202025256987",
          price: "578.62",
          taxamount: "5.2",
          priceA: "伍佰柒拾捌元陆角贰分",
          orderTime: "1589425524000",
          payTime: "1589425624000",
          overTime: "1589427524000",
          payType: "1",
          payAccount: "17899996666"
        },
        refund: {
          refundId: "TKBH156202002021459",
          refundPrice: "88.88",
          refundTime: "1589425254000"
        },
        address: {
          receiver: "啊呀",
          receiverMobile: "17800001111",
          receiverP: "陕西省",
          receiverC: "西安市",
          receiverA: "雁塔区",
          OrderId: "977929952244519958"
        },
        goodsList: [
          {
            price1: "45.56",
            price2: "35.56",
            size: "XL",
            unit: "件",
            taxRate: "0",
            taxamount: "10",
            num: 1,
            name:
              "AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子"
          },
          {
            price1: "415.56",
            price2: "325.56",
            size: "L",
            unit: "箱",
            taxRate: "5",
            taxamount: "19",
            num: 2,
            name: "学生党军训AAS防晒霜喷雾男女士面部防水防紫外线"
          }
        ]
      },
      dialogInfo: {}
    };
  },
  created: function() {},
  mounted() {
    let self = this;
    self.orderDetailsFun();
  },
  computed: {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async orderDetailsFun() {
      let self = this;
      self.orderId = this.$route.query.orderId;
      let params = {
        orderId: self.orderId
      };
      let res = await orderDetails(params);

      if (res.status == 200 && res.data) {
        this.DetailMessage = res.data;
        this.DetailList = res.data.orderItemList;
      } else {
        this.$message({
          type: "error",
          message: "系统开小差！"
        });
      }
    }
  },
  filters: {
    payTypeFil(val) {
      if (val == 0) {
        return "支付宝";
      } else if (val == 1) {
        return "微信";
      } else {
        return "银联";
      }
    },
    historyFil(val) {
      return val == 1 ? "买家" : "卖家";
    },
    // 接口
    /* 价格过滤器 start */

    toChies: function(values) {
      //形参
      let len = values.length; //统计出长度
      let arr = [];

      let chin_list = [
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ]; //所有的数值对应的汉字

      let chin_lisp = [
        "仟",
        "佰",
        "拾",
        "亿",
        "仟",
        "佰",
        "拾",
        "万",
        "仟",
        "佰",
        "拾"
      ]; //进制

      for (let i = 0; i < len; i++) {
        arr.push(parseInt(values[i])); //输入的数据按下标存进去   存进去的只是数字
        arr[i] = chin_list[arr[i]]; //是根据我们输入的输入的数字，对应着我们的chin_list这个数组
      } //123['壹','佰','贰','拾','叁']

      for (let i = len - 1, j = 1; i > 0; i--) {
        //i =2	1		//倒序		为了添加进制，方便我们去观看
        arr.splice(i, 0, chin_lisp[chin_lisp.length - j++]); //j=2
      }
      console.log(arr);

      arr = arr.join("");
      if (len >= 1) {
        arr += "元整";
      }
      return arr;
    }
    /* 价格过滤器  end  */
  },
  watch: {}
};
</script>
<style scoped>
.BOX_main {
  height: calc(100% - 20px);
  width: calc(100% - 30px);
  padding: 20px 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  overflow: hidden;
  flex-direction: column;
  /* flex-wrap: wrap; */
}
/* 间隔线 */
.BOX_main_line {
  width: 100%;
  margin: 20px 0;
  height: 1px;
  border-bottom: 1px solid #989fad;
  border-top: 1px solid #989fad;
}
/* 表格标题 */
.BOX_main_item_title {
  width: 100%;
  margin-bottom: 20px;
}
/* 表格 */
.BOX_main_item_table {
  width: calc(100% - 2px);
  height: 60px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
  text-align: center;
  display: table;
  border: 1px solid rgba(238, 240, 245, 1);
  border-bottom: none;
}
/* 商品 */
.table_item {
  padding: 0 40px;
  line-height: 60px;
  border-bottom: 1px solid rgba(238, 240, 245, 1);
}
.table_item_colorBlack {
  color: rgba(0, 0, 0, 1);
}
.table_item_colorGray {
  color: rgb(155, 175, 175);
}
.table_item_backgroundGray {
  background-color: rgba(245, 246, 250, 1);
}
.table_item_padding {
  padding: 10px 40px;
}
.table_li_first {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table_li_order {
  width: 10%;
}
.table_li_invoice {
  width: 60px;
}
.table_li_fontBlod {
  font-weight: bold;
}
.table_li_lh30 {
  line-height: 30px;
}
.table_li_taLeft {
  text-align: left;
}
.table_li_taLeft_span {
  padding-left: 5px;
}
</style>
